<template>
	<view>
		<view v-if="list.length > 0">
			<view class="tip_view">
				<image style="height: 32rpx;width: 32rpx;margin-left: 26rpx;" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/tip_icon.png"></image>
				<label style="margin-left: 10rpx;font-size: 24rpx;color: #FF822E;">顾问根据您当前情况进行推荐的食谱</label>
			</view>
			<view @click="goToDetail(item)" class="cook_book_item" v-for="(item,index) in list" :key="index">
				<label class="name_info">{{ item.name }}</label>
				<image class="next_btn" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/cookbook_next.png"></image>
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/delete_dynamic.png" class="del" @click.stop="onDelete(item.id)"/>
			</view>
		</view>
		<view style="display: flex;flex-direction: column;align-items: center;" v-else>
			<image style="width: 316rpx;height: 316rpx;margin-top: 256rpx;" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/sp_null.png"></image>
			<label style="margin-top: 20rpx;text-align: center;color: #272A37;font-weight: 500;font-size: 32rpx;">
                顾问当前暂无推荐食谱</br>您可查看常规推荐食谱
			</label>
			<bottom-big-btn-view btnTitle="推荐食谱" @commit="goToCookBook"></bottom-big-btn-view>
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            form: {
                orderByColumn: 'recommendTime desc',
                // isAsc: 'descending',
                // pageNum: 1,
                // pageSize: 20
            },
        };
    },
    methods: {
        requestList() {
            // if (isFresh) {
            // 	this.form.pageNum = 1
            // 	this.form.pageSize = 20
            // }
            this.request.httpTokenRequest('/mp-api/wx/cookbook/recommend', this.form, 'POST', true).then((res) => {
                uni.stopPullDownRefresh();
                if (res.code == 0) {
                    this.list = res.data;
                }
            });
        },
        goToDetail(item) {
            uni.navigateTo({
                url: `/packageHome/pages/cookbook/cookbook?id=${item.id}`,
            });
        },
        goToCookBook() {
            uni.navigateTo({
                url: '/packageHome/pages/cookbook/cookbook',
            });
        },
        async onDelete(id){
           const [,{confirm}]= await uni.showModal({ content: '移除后不可恢复，请确认是否移除此食谱？' });
           if(confirm){
               await this.request.httpTokenRequest(`/mp-api/wx/cookbook/delRecommend/${id}`, null, 'POST', true);
               this.requestList(true);
               uni.showToast({ title: '移除成功', icon: 'none' });
           }
        }
    },
    onLoad() {
        this.requestList(true);
    },
    onPullDownRefresh() {
        this.requestList(true);
    },
};
</script>

<style scoped>
page {
    background-color: #f6f6f6;
}
.tip_view {
    background-color: #f6f0eb;
    width: 100%;
    height: 74rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.cook_book_item {
    margin-top: 20rpx;
    width: 100%;
    border-radius: 24rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(25, 109, 82, 0.04);
    display: flex;
    flex-direction: column;
    padding-bottom: 30rpx;
    position: relative;
}
.name_info {
    margin-top: 30rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    color: #333333;
    font-weight: 500;
    line-height: 48rpx;
    width: calc(100% - 120rpx);
    font-size: 32rpx;
}
.next_btn {
    margin-left: 15rpx;
    margin-top: 20rpx;
    margin-right: 30rpx;
    width: 160rpx;
    height: 52rpx;
}
.del{
    position: absolute;
    right:0;
    top:10px;
    width:36px;
    height:30px;
}
</style>
